<template>
  <Drawer
    title="创建校区"
    v-model="isShow"
    width="360"
    :mask-closable="false"
    :styles="styles"
    :closable="false"
  >
    <Form :model="school" :label-width="80">
      <FormItem label="校区名称" label-position="top">
        <Input v-model="school.schoolName" placeholder="请填写校区名称" />
      </FormItem>

      <FormItem label="负责人" label-position="top">
        <Input v-model="school.contact" placeholder="请填写负责人名称" />
      </FormItem>

      <FormItem label="联系电话" label-position="top">
        <Input v-model="school.phone" placeholder="请填写联系电话" />
      </FormItem>

      <FormItem label="校区地址" label-position="top">
        <Input v-model="school.loc" placeholder="请填写校区地址" />
      </FormItem>
    </Form>
    <div>
      <Button style="margin-right: 8px" @click="close">取消</Button>
      <Button type="primary" @click="add">确定添加</Button>
    </div>
  </Drawer>
</template>

<script>
import { create } from "../../../api/school";
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      open: false,
      school: {},

      styles: {
        height: "calc(100% - 55px)",
        overflow: "auto",
        paddingBottom: "53px",
        position: "static"
      }
    };
  },
  methods: {
    close() {
      this.open = false;
      this.$emit("close");
    },
    add() {
      console.info(this.school);
      create(this.school)
        .then(res => {
          this.open = false;
          this.$emit("ok");
          this.$Message.success("添加成功");
        })
        .catch(err => {
          this.$Message.error("添加失败");
          console.info(err);
        });
    }
  }
};
</script>

<style scoped>
.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
